<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
  <script>
    class PageOne extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page One</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            <h1>Page One</h1>
            <ion-button href="#/two">Go to Page Two</ion-button>
          </ion-content>
        `;
      }
    }
    class PageTwo extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button text="Page One"></ion-back-button>
              </ion-buttons>
              <ion-title>Page Two</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            <h1>Page Two</h1>
            <div>
              <ion-nav-push component="page-three">
                <ion-button href="#/page-3">Go to Page Two</ion-button>
              </ion-nav-push>
            </div>
          </ion-content>
        `;
      }
    }
    class PageThree extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button text="Page Two"></ion-back-button>
              </ion-buttons>
              <ion-title>Page Three</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            <h1>Page Three</h1>
          </ion-content>
        `;
      }
    }
    customElements.define('page-one', PageOne);
    customElements.define('page-two', PageTwo);
    customElements.define('page-three', PageThree);
  </script>
</head>

<body>
  <ion-app>
    <ion-router>
      <ion-route url="/" component="page-one"> </ion-route>
      <ion-route url="/two" component="page-two"> </ion-route>
      <ion-route url="/page-3" component="page-three"> </ion-route>
    </ion-router>

    <ion-split-pane>
      <ion-menu>
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-item href="#/">
            <ion-label>Page 1</ion-label>
          </ion-item>
          <ion-item href="#/two">
            <ion-label>Page 2</ion-label>
          </ion-item>
          <ion-item href="#/page-3">
            <ion-label>Page 3</ion-label>
          </ion-item>
        </ion-content>
      </ion-menu>
      <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
  </ion-app>
</body>

</html>
